<template>
  <div class="category-page">
    <!-- 顶部导航栏 -->
    <Header />
    
    <div class="main-content">
      <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
          <h1>{{ categoryName }}</h1>
          <p>发现更多{{ categoryName }}商品</p>
        </div>
        
        <!-- 筛选和排序 -->
        <div class="filter-section">
          <div class="filter-row">
            <!-- 排序 -->
            <div class="filter-group">
              <span class="filter-label">排序：</span>
              <a-select
                v-model:value="sortBy"
                placeholder="排序方式"
                style="width: 150px"
                @change="handleSortChange"
              >
                <a-select-option value="default">默认排序</a-select-option>
                <a-select-option value="price-asc">价格从低到高</a-select-option>
                <a-select-option value="price-desc">价格从高到低</a-select-option>
                <a-select-option value="rating">评分最高</a-select-option>
                <a-select-option value="sales">销量最高</a-select-option>
              </a-select>
            </div>
            
            <!-- 价格范围 -->
            <div class="filter-group">
              <span class="filter-label">价格：</span>
              <a-input-number
                v-model:value="priceRange.min"
                placeholder="最低价"
                style="width: 100px"
                @change="handlePriceChange"
              />
              <span class="price-separator">-</span>
              <a-input-number
                v-model:value="priceRange.max"
                placeholder="最高价"
                style="width: 100px"
                @change="handlePriceChange"
              />
            </div>
          </div>
        </div>
        
        <!-- 商品列表 -->
        <div class="products-section">
          <!-- 加载状态 -->
          <div v-if="loading" class="loading-container">
            <a-spin size="large" />
            <p>正在加载商品...</p>
          </div>
          
          <!-- 商品网格 -->
          <div v-else-if="products.length > 0" class="products-grid">
            <ProductCard 
              v-for="product in products" 
              :key="product.id"
              :product="product"
              @add-to-cart="addToCart"
            />
          </div>
          
          <!-- 空状态 -->
          <div v-else class="empty-state">
            <ShoppingOutlined class="empty-icon" />
            <h3>暂无商品</h3>
            <p>该分类下暂时没有商品</p>
            <a-button type="primary" @click="goToProducts">
              查看全部商品
            </a-button>
          </div>
        </div>
        
        <!-- 分页 -->
        <div v-if="totalProducts > 0" class="pagination-section">
          <a-pagination
            v-model:current="currentPage"
            :total="totalProducts"
            :page-size="pageSize"
            show-size-changer
            show-quick-jumper
            show-total
            @change="handlePageChange"
            @show-size-change="handlePageSizeChange"
          />
        </div>
      </div>
    </div>
    
    <!-- 底部信息 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { ShoppingOutlined } from '@ant-design/icons-vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import ProductCard from '@/components/ProductCard.vue'

// 使用Vuex store和Vue Router
const store = useStore()
const router = useRouter()
const route = useRoute()

// 响应式数据
const loading = ref(false)
const sortBy = ref('default')
const currentPage = ref(1)
const pageSize = ref(12)

const priceRange = reactive({
  min: null,
  max: null
})

// 计算属性
const categoryName = computed(() => route.params.category)
const products = computed(() => store.getters['product/products'])
const totalProducts = computed(() => store.getters['product/totalProducts'])

// 方法
const loadProducts = async () => {
  loading.value = true
  
  try {
    await store.dispatch('product/fetchProducts', {
      category: categoryName.value,
      page: currentPage.value
    })
  } catch (error) {
    console.error('加载商品失败:', error)
    message.error('加载商品失败，请重试')
  } finally {
    loading.value = false
  }
}

const handleSortChange = () => {
  currentPage.value = 1
  loadProducts()
}

const handlePriceChange = () => {
  currentPage.value = 1
  loadProducts()
}

const handlePageChange = (page) => {
  currentPage.value = page
  loadProducts()
}

const handlePageSizeChange = (current, size) => {
  pageSize.value = size
  currentPage.value = 1
  loadProducts()
}

const addToCart = (product) => {
  store.dispatch('cart/addToCart', product)
  message.success('已添加到购物车')
}

const goToProducts = () => {
  router.push('/products')
}

// 监听路由参数变化
watch(() => route.params.category, (newCategory) => {
  if (newCategory) {
    currentPage.value = 1
    loadProducts()
  }
})

// 生命周期
onMounted(async () => {
  await loadProducts()
})
</script>

<style scoped>
.category-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  flex: 1;
  padding: 20px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px 0;
}

.page-header p {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}

.price-separator {
  color: #666;
  margin: 0 5px;
}

.products-section {
  margin-bottom: 30px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-container p {
  margin-top: 15px;
  color: #666;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.empty-icon {
  font-size: 64px;
  color: #d9d9d9;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 20px;
  color: #333;
  margin: 0 0 10px 0;
}

.empty-state p {
  color: #666;
  margin: 0 0 20px 0;
}

.pagination-section {
  display: flex;
  justify-content: center;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 15px 0;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .filter-group {
    justify-content: space-between;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }
  
  .pagination-section {
    padding: 15px;
  }
}
</style> 